<script lang='ts' setup>
import TitleBar from '@/components/标题.vue'
import request from '@/assets/工具/网络请求'
import { useRoute } from 'vue-router';
import { ref } from 'vue';
import type { BookingFormData, ImageBaseUrl } from '@/types';
import { getLocalStringDate, getLocalStringDateTime } from '@/assets/工具/工具类';

const route = useRoute()
const id = route.params.id
console.log(id);
const id2 = sessionStorage.getItem('token')

// request.doGet(`/BookingOrderServlet?id1=${id}&id2=${id2}`).then(result => {
//     orderInfo.value = result.data;
// });

const orderInfo = ref({} as BookingFormData)
request.doGet("/BookingOrderServlet"+"/" + id+"/"+id2).then(result => {
    orderInfo.value = result.data
})
</script>
<template>
    <div class="组件根元素">
        <TitleBar title="预约详情" />
        <div class="detailsPane">
            <div class="Information_details">
            <div>订单编号：{{ orderInfo.id }}</div>
            <div>进校日期：{{ getLocalStringDate(orderInfo.visitDate) }}</div>
            <div>下单时间：{{ getLocalStringDateTime(orderInfo.bookingTime) }}</div>
            <div>游客信息：</div>
        </div>
        <div>

       
            <ul  class="detailsPane">
                <li class="details_pane" v-for="visitor of orderInfo.visitorsInfo" :key="visitor.id">
                    <div>
                        姓名:
                        {{ visitor.name }}
                    </div>
                    <div>
                        身份证号:
                        {{ visitor.idCode }}
                    </div>
                    <div>
                        手机号:
                        {{ visitor.phoneNumber }}
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>
<style scoped>

.组件根元素{
    background-image: url("@/assets/图片/780.jpg");
}
.detailsPane{
    padding: 10px 20px 0 20px;
    box-sizing: border-box;
    /* background-color: rgb(255, 246, 235,0); */
    border-radius: 10px;
    
}

.detailsPane li:nth-child(odd){
    background-color: rgb(229, 238, 247,0.6);
   
}
.detailsPane li:nth-child(even){
    background-color: rgb(231, 189, 196,0.6);
}
.detailsPane li{
    padding: 10px 0px;
    border-radius: 10px;
    box-sizing: border-box;
}

.details_pane{
    margin-top: 20px;
}
.details_pane div{
    padding: 0px 10px;
    font-size: 16px;
    box-sizing: border-box;
}
ul {
    padding-left: 0px;
}

li{
    list-style: none;
   
}
.overall{
    font-size: 18px;
    font-family: kj;
    width: 343px;
    margin: auto;
    
}


.Information_details{
    background-color: rgb(222, 184, 135,0.6);
    border-radius: 8px;
    padding: 5px 5px;
    font-size: 22px;
    overflow: hidden;
    box-sizing: border-box;
}
.Component{
    padding-top: 44px;
    box-sizing: border-box;
   
}
.Information_details div{
    padding-left: 20px;
    box-sizing: border-box;
}

</style>